React-[入門篇]-加入更多元件到React Pizza專案


我們繼續回到以CRA所建立的React Pizza專案上
上篇我們透過CRA建立專案,都集中在index.js中撰寫程式碼,加入食譜資料並創建Pizza元件

繼續加入更多元件在index.js中

我們繼續創建Header Menu Footer元件

Header 元件


顯示出來了!

Footer 元件(不寫JSX的方式)

用React.createElement()函式來return建立外觀

真的也可以噎!但真的不好閱讀

Footer 元件(寫JSX的方式)



現在就可以體會到JSX語法的好用,完美結合了html 和 js語法並存

Menu 元件


元件中可以寫入自己的邏輯流程

記得這張圖:

元件中可以寫入自己的邏輯流程

#React入門 #JSX(JS&HTML)







你可能感興趣的文章

初試啼聲,只用原生 JS 跟 CSS 寫「口罩地圖 」Ep.04

初試啼聲,只用原生 JS 跟 CSS 寫「口罩地圖 」Ep.04

Python 程式設計函式的定義和呼叫入門教學

Python 程式設計函式的定義和呼叫入門教學

簡單的 JS 陣列 method 整理

簡單的 JS 陣列 method 整理






留言討論